<template>
  <div class="cat">
    <header class="cat-header">{{ header }}</header>
    <div class="cat-nav-box">
      <div class="cat-nav-list">
        <div class="cat-nav"><router-link to="/home">精选</router-link></div>
        <div class="cat-nav" v-for="item in nav" :key="item.id">
          <router-link
            to=""
            :class="cid == item.cid ? 'active' : ''"
            @click="load(item.cid)"
            >{{ item.name }}</router-link
          >
        </div>
      </div>
    </div>
    <div class="cat-tab-box">
      <div class="cat-tab-list" v-for="(item, i) in nav" :key="i">
        <van-grid
          :column-num="4"
          v-if="item.cid == cid"
          :border="false"
          :icon-size="56"
          clickable
        >
          <van-grid-item
            v-for="(val, i) in item.sub_class"
            :key="i"
            :icon="val.icon"
            :text="val.name"
            @click="list(val.original_id)"
          />
        </van-grid>
      </div>
    </div>
    <div class="cat-list">
      <van-tabs
        v-model:active="active"
        animated
        sticky
        @click="get"
        offset-top="0.88rem"
      >
        <van-tab
          v-for="item in tabsList"
          :title="item.title"
          :name="item.name"
          :key="item.id"
        >
          <div v-if="loading" class="cat-load">正在加载数据</div>
          <div v-else>
            <div v-if="!data.length">暂无数据</div>
            <div v-else>
              <van-card
                v-for="item in data"
                :key="item.id"
                :price="item.jiage"
                :desc="item.miaoshu"
                :title="item.title"
                :thumb="item.pic"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >优惠券 {{ item.quan_jine }}</van-tag
                  >
                </template>
              </van-card>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  computed,
  ref,
} from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const route = useRoute();
    const start = reactive({
      header: "",
      cid: "0",
    });
    const loading = computed(() => {
      return store.state.cat.loading;
    });
    const tabsList = ref([
      {
        id: 1,
        title: "人气",
        name: "hot",
      },
      {
        id: 2,
        title: "最新",
        name: "latest",
      },
      {
        id: 3,
        title: "销量",
        name: "sell",
      },
      {
        id: 4,
        title: "价格",
        name: "price",
      },
    ]);
    const nav = computed(() => {
      return store.state.cat.nav;
    });
    const data = computed(() => {
      return store.state.cat.data;
    });
    const get = (name: string): void => {
      console.log(name);
      store.dispatch({
        type: "cat/setload",
      });
      store.dispatch({
        type: `cat/get${name}`,
        cid: start.cid,
      });
    };
    onMounted(() => {
      store.dispatch({
        type: "cat/getnav",
      });
      if (route.query?.cid) {
        switch (route.query.cid) {
          case "6":
            start.header = "美食";
            start.cid = "6";
            break;
          case "4":
            start.header = "日用家居";
            start.cid = "4";
            break;
          case "1":
            start.header = "女装";
            start.cid = "1";
            break;
          case "3":
            start.header = "美妆";
            start.cid = "3";
            break;
          case "8":
            start.header = "数码家电";
            start.cid = "8";
            break;
          case "5":
            start.header = "鞋品";
            start.cid = "5";
            break;
          case "9":
            start.header = "男装";
            start.cid = "9";
            break;
          case "10":
            start.header = "内衣";
            start.cid = "10";
            break;
          case "2":
            start.header = "母婴";
            start.cid = "2";
            break;
          case "14":
            start.header = "家装家纺";
            start.cid = "14";
            break;
          case "7":
            start.header = "文娱车品";
            start.cid = "7";
            break;
          case "12":
            start.header = "配饰";
            start.cid = "12";
            break;
          case "11":
            start.header = "箱包";
            start.cid = "11";
            break;
          case "13":
            start.header = "户外运动";
            start.cid = "13";
            break;
          default:
            start.header = "美食";
            start.cid = "6";
        }
      } else {
        start.header = "美食";
        start.cid = "6";
      }
      store.dispatch({
        type: "cat/gethot",
        cid: start.cid,
      });
    });
    const load = (href: string) => {
      location.href = `/cat?cid=${href}`;
    };
    const list = (re: string) => {
      location.href = `/cat/list?cid=${re}`;
    };
    return {
      ...toRefs(start),
      nav,
      load,
      list,
      data,
      tabsList,
      get,
      loading,
    };
  },
});
</script>
<style lang="stylus">
.cat-load
    font-size .12rem
    text-align center
.cat-header
    background linear-gradient(270deg,#fe3c35 0,#ff1f4c 100%)
    color #fff
    text-align center
    font-size .17rem
    line-height .44rem
    position fixed
    top 0
    left 0
    right 0
    z-index 11
.cat-nav-box
    width 100%
    padding-top .44rem
    overflow auto
    position sticky
    top 0
    background #fff
    z-index 10
    &::-webkit-scrollbar{
          display none
    }
    .cat-nav-list
        overflow hidden
        width 8.7rem
        .cat-nav
            font-size .14rem
            float left
            line-height .44rem
            margin 0 .1rem
            a
                color #333
                text-decoration none
                &.active
                    color #FC3F78
                    font-weight 700
</style>
